<template>
  <div class="songlist">
    <el-table @row-dblclick="Playsong" :row-style="{ height: '50px' }" :data="songData" style="width: 100%">
      <el-table-column show-overflow-tooltip prop="name" width="400" label="歌曲" />
      <el-table-column show-overflow-tooltip  width="300" label="歌手">
        <template #default="scope">
          <span v-for="(item,index) in scope.row.ar" :key="index"> {{ item.name}}、</span>
      </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="al.name" width="400" label="专辑" />
      <el-table-column show-overflow-tooltip  label="时长">
        <template #default="scope">
          <span> {{ useFormatDuring(scope.row.dt/1000 )}}</span>
      </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script setup lang="ts">
import {useFormatDuring} from '@/utils/time.ts'
import { usePlaySongStore } from '@/store/playsong.ts';
const PlaySongUrl = usePlaySongStore();
defineProps<{
  songData?: any
}>()
const Playsong = (e: any) => {
    PlaySongUrl.isHave(e.id)
}


</script>
<style lang="scss" scoped></style>
